<template>
  <el-dialog
    title="新增"
    :visible.sync="visible"
    :show-close="false"
    width="400px"
    :modal="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click.stop="cancelModal">
      <i class="el-dialog__close el-icon el-icon-close"></i>
    </button>
    <el-form
      class="form-wrapper"
      ref="orderForm"
      :model="orderForm"
      :rules="addRules"
      label-width="110px"
    >
      <el-form-item label="日期：" prop="rq">
        <el-date-picker
          style="width:180px;"
          value-format="yyyy-MM-dd"
          v-model="orderForm.rq"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="渠道：" prop="qddm">
        <el-select
          style="width:180px;"
          v-model="orderForm.qddm"
          @change="qdchange"
          placeholder="请选择"
          filterable
        >
          <el-option
            v-for="item in qdlist"
            :key="item.code"
            :label="item.name+'['+ item.code +']'"
            :value="item.code"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="门店/客户：" prop="khdm">
        <el-select
          :disabled="!orderForm.qddm"
          style="width:180px;"
          v-model="orderForm.khdm"
          placeholder="请选择"
          filterable
        >
          <el-option
            v-for="item in khlist"
            :key="item.code"
            :label="item.name+'['+ item.code +']'"
            :value="item.code"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="收款类型：" prop="sklxDm">
        <el-select style="width:180px;" v-model="orderForm.sklxDm" filterable placeholder="请选择">
          <el-option
            v-for="item in sklxlist"
            :key="item.code"
            :label="item.name+'['+ item.code +']'"
            :value="item.code"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订货会：" prop="dhhdm">
        <el-select style="width:180px;" v-model="orderForm.dhhdm" filterable placeholder="请选择">
          <el-option
            v-for="item in dhhlist"
            :key="item.code"
            :label="item.name+'['+ item.code +']'"
            :value="item.code"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分账信息：" prop="fzxx">
        <el-select style="width:180px;" v-model="orderForm.fzxx" filterable placeholder="请选择">
          <el-option
            v-for="item in fzxxlist"
            :key="item.code"
            :label="item.name+'['+ item.code +']'"
            :value="item.code"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注：" prop="bz">
        <el-input v-model="orderForm.bz" style="width:180px;"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="buttons-wrap">
      <el-button type="primary" @click="submitForm('orderForm')">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import Moment from "moment";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      user: JSON.parse(window.sessionStorage.getItem("user")),
      checkboxvalue: "",
      orderForm: {
        rq: Moment().format("YYYY-MM-DD"),
        qddm: "",
        khdm: "",
        sklxDm: "",
        dhhdm: "",
        fzxx: "",
        zdr: ""
      },
      user: JSON.parse(window.sessionStorage.getItem("user")),
      addRules: {
        qddm: [{ required: true, message: "请选择渠道", trigger: "change" }],
        khdm: [
          { required: true, message: "请选择门店或客户", trigger: "change" }
        ],
        sklxDm: [
          { required: true, message: "请选择收款类型", trigger: "change" }
        ],
        dhhdm: [{ required: true, message: "请选择订货会", trigger: "change" }],
        fzxx: [{ required: true, message: "请选择分账信息", trigger: "change" }]
      },
      qdlist: [],
      khlist: [],
      sklxlist: [],
      dhhlist: [],
      fzxxlist: []
    };
  },
  created() {
    this.getlistQdlist();
    this.getlistsklxlist();
    this.getlistdhhlist();
    this.getlistfzxxlist();
  },
  methods: {
    // 获取渠道列表
    getlistQdlist() {
      this.getRequest("/common/getqd?&page=1&size=100").then(res => {
        if (res) {
          this.qdlist = res.data;
          console.log(res.data);
        }
      });
    },
    //  获取门店客户
    qdchange(e) {
      this.orderForm.khdm = "";
      this.getRequest(
        "/common/getmd?&page=1&size=100&qddm=" + this.orderForm.qddm
      ).then(res => {
        if (res) {
          this.khlist = res.data;
          console.log(res.data);
        }
      });
    },
    // sklxlist  首款类型
    getlistsklxlist() {
      this.getRequest("/earnestmoney/sklx/query?&page=1&size=100").then(res => {
        if (res) {
          this.sklxlist = res.data;
          console.log(res.data);
        }
      });
    },
    //  订货会
    getlistdhhlist() {
      this.getRequest("/earnestmoney/dhh/query?&page=1&size=100").then(res => {
        if (res) {
          this.dhhlist = res.data;
          console.log(res.data);
        }
      });
    },
    // 分账信息  getfzxx
    getlistfzxxlist() {
      this.getRequest("/common/getfzxx?&page=1&size=100").then(res => {
        if (res) {
          this.fzxxlist = res.data;
          console.log(res.data);
        }
      });
    },
    initForm() {
      this.orderForm = {
        code: "",
        name: "",
        xtmr: "",
        status: "",
        zdr: "",
        qyr: ""
      };
      if (this.$refs.orderForm) {
        this.$refs.orderForm.resetFields();
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.orderForm);
          this.orderForm.zdr = this.user.name;
          this.postRequest("/earnestmoney/djysd/create", this.orderForm).then(
            res => {
              console.log(res, "11111");
              if (res.status == "200") {
                // this.$parent.getdata();
                this.$router.push({path:'/detailEdit',query: res.obj})
                // this.$emit("update:visible", false);
              }
            }
          );
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    cancelModal() {
      // 关闭弹窗，触发父组件修改visible值
      this.$emit("update:visible", false);
    }
  }
};
</script>
<style lang="scss" scoped>
.buttons-wrap {
  .el-button {
    margin-right: 20px;
    min-width: 100px;
  }
}
</style>